import React from 'react'
import ResponsiveModal from '@/components/responsive-modal'
import { UploadDropzone } from '@/lib/uploadthing'
import { trpc } from '@/lib/trpc'

interface ThumbnailUploadModalProps {
    videoId: string,
    open: boolean,
    onOpenChange: (open: boolean) => void,
}

export default function ThumbnailUploadModal({ videoId, open, onOpenChange }: ThumbnailUploadModalProps) {
    const utils = trpc.useUtils()

    const onOpenUploadComplete = async () => {
        utils.studio.getOne.invalidate({ id: videoId })
        await utils.studio.getMany.invalidate()
        onOpenChange(false)
    }

    return (
        <ResponsiveModal title='upload a thumbnail' open={open} onOpenChange={onOpenChange}>
            <UploadDropzone endpoint='thumbnailUploader' input={{ videoId }} onClientUploadComplete={onOpenUploadComplete} />
        </ResponsiveModal>
    )
}
